<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击切换内容</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: grey;
        font-family: '华文行楷';
        font-size: 25px;
    }

    h1 {
        margin-bottom: 5px;
    }
</style>
<body>
<div id="container"></div>

<!--引入react核心库-->
<script src="../../../../js-依赖包/react.development.js"></script>
<!--引入react.dom 用于支出react操作DOM-->
<script src="../../../../js-依赖包/react-dom.development.js"></script>
<!--引入babel  用于将jsx转换为js-->
<script src="../../../../js-依赖包/babel.min.js"></script>

<script type="text/babel"> //这里一定要将类型写为babel
// 创建类式组件
class Weather extends React.Component {
    // 向Weather实例对象的state属性赋值
    state = {isHot: false,isWind:true}

    // Weather原型上的方法
    render() {
        let {isHot,isWind} = this.state
        return <h2 onClick={this.changeWeather}>今天的天气是{isHot ? '阳光明媚的' : '倾盆大雨'},{isWind ? '大风' : '无风'}！！</h2>
    }

    // 方法1. changeWeather() {}
    // 写在了Weather的原型对象上
    // 由于changeWeather是作为onClick的回调，所以不是通过实例对象调用的，而是函数直接调用
    // 所以this应该指向window 但是类中的方法默认开启了严格模式，因此changeWeather中的this是undefined
    // 所以需要在构造器(constructor)中写this.changeWeather=this.changeWeather.bind(this)//bind(this)--将原型链上的changeWeather方法的this指向修改为Weather的实例对象赋值给changeWeather属性

    // 方法2. changeWeather=()=> {} -- 箭头函数 this指向本身外层的this
    // 写在了Weather的实例对象上
    // 点击事件 自定义方法
    changeWeather=()=> { //赋值语句--所以此方法在实例化对象上
        // this.state.isHot=!this.state.isHot // (错误写法) 严重注意：状态(state)不可直接更改，需要内置的API去更改
        this.setState({isHot:!this.state.isHot,isWind: !this.state.isWind}) // 正确的写法
        console.log(this.state.isHot,this.state.isWind)
    }
}

// 2. 渲染组件到页面
ReactDOM.render(<Weather/>, document.getElementById('container'))


</script>
</body>
</html>